<template>
    <view class="main">
      <view class="label">套餐选择</view>
      <scroll-view 
      class="scroll-view" 
      scroll-x 
      :show-scrollbar="false"
      :scroll-left="scrollLeft"
      scroll-with-animation
      @scroll="handleScroll"
      ref="scrollView"
    >
      <view class="scroll-container">
        <view 
          class="scroll_item"
          v-for="(item, index) in thalisArray" 
          :key="index"
          :id="'item-' + index"
          :class="{
              'active': activeIndex === index,
              'first-item': index === 0,
              'last-item': index === props.thalisArray.length - 1,
              'middle-item': index > 0 && index < props.thalisArray.length - 1
          }"
          @click="handleItemClick(item,index)"
        >
          <view class="content">
              <view class="title">
                <view class="label">{{ item.name }}</view>
                <!-- <view class="price">￥<text class="num">{{ item.price }}</text></view> -->
              </view>
              <!-- <view class="intro" v-html=" item.memo "></view> -->
              <mp-html class="intro" :content="item.memo"></mp-html>
              <!-- <view class="goods">
                    <view class="item"><text class="tag">住</text>{{ item.goods.live }}</view>
                    <view class="item"><text class="tag">导</text>{{ item.goods.guide }}</view>
                    <view class="item"><text class="tag">餐</text>{{ item.goods.eat }}</view>  
              </view> -->
              <view class="icon" v-show="activeIndex === index">
                  <wd-icon  name="check-circle-filled" ></wd-icon>
              </view>
                
          </view>
        </view>
      </view>
    </scroll-view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted, nextTick, getCurrentInstance, defineProps, defineEmits ,watch } from 'vue';
  const emit = defineEmits(['checkedID']);
  
  const props = defineProps({
      thalisArray: {
        type: Array,
        required: true
      }
  });
  
  const activeIndex = ref(0);
  const scrollLeft = ref(0);
  const currentScrollLeft = ref(0);
  const scrollView = ref(null);
  const instance = getCurrentInstance().proxy;
  
  // 监听 props.thalisArray 的变化
watch(() => props.thalisArray, (newVal) => {
  if (newVal && newVal.length > 0) {
    // 当数据加载后，默认选中第一个并滚动到对应位置
    handleItemClick(newVal[0], 0);
    nextTick(() => {
      scrollToPosition(0);
    });
  }
}, { immediate: true }); // immediate: true 确保首次触发
  
  const scrollToPosition = (index) => {
    const query = uni.createSelectorQuery().in(instance);
    query
      .select('.scroll-view')
      .boundingClientRect() // 获取scroll-view的位置信息
      .select(`#item-${index}`)
      .boundingClientRect() // 获取目标item的位置信息
      .exec((res) => {
        if (!res || res.length < 2 || !res[0] || !res[1]) return;
        const scrollRect = res[0];
        const itemRect = res[1];
  
        // 计算item相对于scroll-view的位置
        const itemPosition = itemRect.left - scrollRect.left + currentScrollLeft.value;
  
        let targetScrollLeft;
        const scrollViewCenter = scrollRect.width / 2;
        const itemCenter = itemRect.width / 2;
  
        if (index === 0) {
          targetScrollLeft = 0;
        } else if (index === props.thalisArray.length - 1) {
          const totalContentWidth = (props.thalisArray.length - 1) * 28;
          const allItemsWidth = props.thalisArray.length * itemRect.width;
          targetScrollLeft = allItemsWidth + uni.upx2px(totalContentWidth) - scrollRect.width;
        } else {
          targetScrollLeft = itemPosition - scrollViewCenter + itemCenter;
        }
  
        // 边界检查
        const maxScrollLeft = (props.thalisArray.length * itemRect.width +
          (props.thalisArray.length - 1) * uni.upx2px(28)) - scrollRect.width;
        const finalScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
  
        // 强制更新滚动位置
        scrollLeft.value = finalScrollLeft;
      });
  };
  
  const handleScroll = (e) => {
      currentScrollLeft.value = e.detail.scrollLeft;
  };
  
  onMounted(() => {
  });
  
  const handleItemClick =  (e,index) => {
    console.log('item',e);
    activeIndex.value = index;
    const id = e.id;
    // const id = e.id || "";
    nextTick();
    emit('checkedID', id); // 将筛选条件传递给父组件
    scrollToPosition(index);
  };
  </script>
  
  <style lang="scss" scoped>
  .main {
    .label{ 
        font-size: 38rpx;
        font-weight: bold;
    }
  }
  
  .scroll-view {
    white-space: nowrap;
    width: 100%;
    margin-top: 28rpx;
  }
  
  .scroll-container {
    display: inline-flex;
    padding: 0 0;
  }
  
  .scroll_item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 37rpx 20rpx;
    height: 320rpx;
    width: 445rpx;
    background-color: #eeefe7;
    border-radius: 10rpx;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    .content {
        width: 100%;
        height: 100%;
        white-space: pre-line;
        word-wrap: break-word;
        .title{
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            .label {
                font-size: 33rpx;
                font-weight: bold;
            }
            
            .price {
                font-size: 22rpx;
                margin-left: 15rpx;
                .num{
                    font-size: 33rpx;
                    font-weight: bold;
                }
            }
        }
        .intro{
            margin-top: 20rpx;
            font-size: 33rpx;
            // width: 400rpx;
            // white-space: pre-line;
            // word-wrap: break-word;
            // box-sizing: border-box;
        }
        .goods{
            margin-top: 45rpx;
            .item{
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                .tag{
                    font-size: 20rpx;
                    padding: 3rpx 6rpx;
                    border: 1rpx solid;
                    border-radius: 50%;
                    margin-right: 10rpx;
                }
            }
        }
        .icon{
            font-size: 80rpx;
            position: absolute;
            right: -10rpx;
            bottom: -28rpx;

        }
    }
  }
  
  .scroll_item.first-item {
    margin-left: 0;
    margin-right: 14rpx;
  }
  
  .scroll_item.last-item {
    margin-right: 0;
    margin-left: 14rpx;
  }
  
  .scroll_item.middle-item {
    margin: 0 14rpx;
  }
  
  .scroll_item.active {
    color: #1b9c61;
    position: relative;
    overflow: hidden;
  }
  
  
  
  
  </style>